<template>
  <div id="TableUpdate">
    <el-form
      ref="form"
      :model="rowData"
      size="medium "
      label-width="80px"
      label-position="left"
    >
      <!-- 输入项 -->
      <el-form-item
        :prop="item"
        :label="item"
        v-for="(item, index) in titles"
        :key="index"
      >
        <el-input v-model="rowData[item]" :clearable="true" />
      </el-form-item>

      <!-- 按钮项 -->
      <el-form-item>
        <el-button type="primary" @click="updateClick">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { UpdateData } from 'network/home'
export default {
  name: 'TableUpedate',
  data() {
    return {
      preVal: {}
    }
  },

  props: {
    rowData: {
      type: Object,
      default() {
        return {}
      }
    },

    tableName: {
      type: String,
      default() {
        return ''
      }
    }
  },

  created() {
    console.log('create')
    Object.assign(this.preVal, this.rowData)
  },

  computed: {
    titles() {
      return this.rowData.length !== 0 && Object.keys(this.rowData)
    }
  },

  methods: {
    /**
     * 请求数据
     */
    _updateData(data) {
      // data['type'] = 'update'
      // data['tableName'] = this.tableName
      let obj = { sqlType: 'update', tableName: this.tableName }
      Object.assign(obj, data)
      console.log(obj)
      return UpdateData(obj)
    },

    /**
     * 事件响应
     */
    updateClick() {
      //这里是替换row对象属性的值，不能创建一个新的对象赋值给row(深拷贝)
      // Object.assign(row, this.preVal)
      this._updateData(this.rowData).then(res => {
        console.log(res)
        if (res.data.result == true) {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '记录更新成功'
          })
        } else {
          this.$notify({
            type: 'error',
            title: '失败',
            message: '记录更新失败'
          })
          Object.assign(this.rowData, this.preVal)
        }
      })
      this.$emit('updateOver')
    },

    cancel() {
      Object.assign(this.rowData, this.preVal)
      this.$emit('updateOver')
    }
  }
}
</script>

<style  scoped>
#TableUpdate {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  padding: 30px 30px 15px 30px;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  /* background-color: #eee; */
}

.el-form >>> .el-form-item__label {
  color: #fff;
}
</style>